<!DOCTYPE html>
<html>
<head>

    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico"/>

<!--    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"-->
<!--          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="-->
<!--          crossorigin=""/>-->
<!--    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"-->
<!--            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="-->
<!--            crossorigin=""></script>-->
    <link href="./css/leaflet.css" rel="stylesheet">
    <script src="./js/leaflet.js"></script>

</head>
<body>


<!--<div id="mapid" style="width:1900px; height: 900px;"></div>-->
<div id="mapid" style="width:2557px; height: 1290px;"></div>
<script>

    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    L.marker([51.5, -0.09]).addTo(mymap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

    L.circle([51.508, -0.11], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mymap).bindPopup("I am a circle.");

    L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ]).addTo(mymap).bindPopup("I am a polygon.");

    L.control.scale({maxWidth: 1000, metric: true, imperial: false}).addTo(mymap);
    // console.log('%c  比例尺: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', mymap.attributionControl._map._layers);
    // let scale = L.control.scale({maxWidth: 1000, metric: true, imperial: false})
    // scale.addTo(mymap)
    // // 请确保：metric: true（默认）
    // scale._mScale.innerText = `${scale._mScale.innerText.slice(0, -2)} ${scale._mScale.innerText.slice(-2) ==='km'? '公里': '米'}`
    // console.log('%c  scale: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',  scale);

    var popup = L.popup();

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(mymap);
    }

    mymap.on('click', onMapClick);


    mymap.on("zoomend", e => {
        var scale = document.getElementsByClassName('leaflet-control-scale-line')[0].innerHTML;
        console.log('%c  scale : ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',scale );
        var num = parseInt(scale);

        if (scale.includes('km')) {
            console.log('1:' + num * 1000 + 'm')
        } else {
            console.log('1:' + num + 'm')
        }
        //获取当前放大或者缩小的等级
        console.log(e.target.getZoom());
    })
</script>


</body>
</html>